<template>
  <div>
    <!-- map地图 -->
    <DyMap style="position: relative;"></DyMap>
    <!-- 水厂、管网，原水列表 -->
    <Remote :class="isTrue? 'remoteBox' : 'remoteBox1'"></Remote>
    <!-- 图例 -->
    <Legend class="legendBox"></Legend>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DyMap from '../../components/DyMap.vue';
import Map from '../../components/Map.vue';
import Remote from '../../views/theme/Remote.vue'
import bus from '../../tools/eventBus'
import Legend from '../../views/theme/Legend.vue'

// 控制侧边菜单展开/收缩
const isTrue=ref(false)
const isExpand=localStorage.getItem('isExpand')==='true'
isTrue.value=isExpand

bus.on('unfoldable',(is)=>{
  isTrue.value=is
})


</script>
<style lang="scss" scoped>
.remoteBox1{
  position: absolute; 
  top:10px;
  left:5%;
}
.remoteBox{
  position: absolute; 
  top:10px;
  left:20%;
}
.legendBox{
  position: absolute; 
  bottom:2%;
  right:2%;
}
</style>

